import React, { useState, useEffect } from "react";
import { Checkbox, Button } from "antd-mobile";
import "./index.less";

export default function Index(params) {
    const [isChecked, setIsChecked] = useState(false);
    let { hasCheck, cancelBtnTxt, sureBtnTxt, emitSubmitBtn, emitSetAllcheck, isAllcheck } = params;

    // 当 cancelBtnTxt 或 sureBtnTxt 发生变化时，重置 Checkbox 的状态
    useEffect(() => {
        setIsChecked(false);
    }, [cancelBtnTxt, sureBtnTxt]);

    // 当 isAllcheck 发生变化时，重置 Checkbox 的状态
    useEffect(() => {
        setIsChecked(isAllcheck);
    }, [isAllcheck]);


    const handBtn = (type) => {
        emitSubmitBtn(type);
    };

    const handleCheckboxChange = (e) => {
        setIsChecked(e)
        emitSetAllcheck(e)
    };

    return (
        <div className="footer-line">
            {hasCheck ? (
                <div className="footer-check">
                    <Checkbox
                        style={{
                            "--font-size": "14px",
                            "--icon-size": "14px",
                            "--gap": "7px",
                        }}
                        checked={isChecked}
                        onChange={handleCheckboxChange}
                    >
                        全选
                    </Checkbox>
                </div>
            ) : (
                <div style={{ flex: 1 }}></div>
            )}
            <div className="footer-buttons">
                {cancelBtnTxt ? (
                    <Button
                        className="cancel-btn"
                        color="primary"
                        fill="outline"
                        onClick={() => handBtn("cancel")}
                    >
                        {cancelBtnTxt}
                    </Button>
                ) : null}
                {sureBtnTxt ? (
                    <Button
                        className="sure-btn"
                        color="primary"
                        fill="solid"
                        onClick={() => handBtn("sure")}
                    >
                        {sureBtnTxt}
                    </Button>
                ) : null}
            </div>
        </div>
    );
}